<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtmBox">
<head>
   
    <include file='./Public/common/meta.html' />
    <style type="text/css">
    #tiles {
        text-align: center;
        list-style-type: none;
        position: relative;
        margin: 0;
        padding: 0;
    }
    #tiles li {
        width: 208px;
        background-color: #fff;
        border: solid 1px #e5e5e5;
        display: none;
        cursor: pointer;
    }
    .fallList li {
        margin:0;
    }
    </style>
    <script type="text/javascript" src="__PUBLIC__/js/plugins/Wookmark/jquery.wookmark.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/plugins/Wookmark/jquery.imagesloaded.js"></script>
</head>

<body>


    <div class="xsWrap">
        <!-- 顶导 -->
        <include file='./Public/common/header.html' />
        <!-- /顶导 -->
        <!-- main -->
        <div class="mainBox clearfix">

            <!-- 分类nav -->
            <div class="sortsNav">
                <div class="sortsFbox clearfix">
                    <h3 class="sortsTit">{$category}</h3>
                </div>
                <div class="showMain clearfix">
                    <div class="showNavBox clearfix">
                        <ul class="showNav">
                            <li><a class="showMod cur" href="#">{$post_count} 文章</a>
                            </li>
                            <li><a class="showMod " href="__ROOT__/cate/{$category_id}">{$album_count} 专辑</a>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
            <!-- /分类nav -->

            <!-- 瀑布流 -->
            <div class="fallMain">
                <div class=" " id="wmain" style="position: relative;margin-top:10px;">
                    <ul class="fallList blogfall" id='tiles'>
                        <!-- <li>
                            <a class="albumAddBox" href="__ROOT__/post/add">
                                <span class="albumAdd"></span>
                                <p class="albumAddTxt">添加文章</p>
                            </a>
                        </li> -->
						<foreach name="post_list" item="vo">
                        <li>
                            <div class="blogMain">

                                <if condition="$vo.has_picture eq 2">
                                <div class="blogCon">
                                    <a href="__ROOT__/post/{$vo.id}">
                                        <img src="{:W('My/getImgByPostId',array($vo['id']))}" alt="" height="" width="">
                                    </a>
                                </div>
                                <p class="blogTit"><a href="__ROOT__/post/{$vo.id}">{$vo.title}</a>
                                </p>
                                <else/>
                                <p class="blogTit"><a href="__ROOT__/post/{$vo.id}">{$vo.title}</a></p>
                                <div class="blogCon">
                                    <a href="__ROOT__/post/{$vo.id}"><span class="conTxt">
                                    {$vo.content|htmlspecialchars_decode}</span></a>
                                </div>
                                </if>
                            </div>
                            <div class="blogACBox clearfix">
                                <p class="blogAuthor">
                                    <a class="authorHead" href="__ROOT__/admin/personal/view.shtml?id={$vo.user_id}"><img src="__PUBLIC__/{:W('My/getUserVal',array($vo['user_id'],'header_img'))}" alt="" height="26" width="26"></a>
                                    <a class="authorName" href="__ROOT__/admin/personal/view.shtml?id={$vo.user_id}">{:W('My/getUserVal',array($vo['user_id'],'aliasname'))}</a>
                                </p>
                                
                            </div>
                            <div class="blogDate clearfix">
                                <p class="blogAc">
                                   
                                    <a class="zan  {:W('My/postFavoritesHave',array($vo["id"],2))}" post_id="{$vo.id}">赞(<num>{:W('My/postFavoritesCount',array($vo["id"],2))}</num>)</a>
                                    <a class="shoucang {:W('My/postFavoritesHave',array($vo["id"],1))}" post_id="{$vo.id}">收藏({:W('My/postFavoritesCount',array($vo["id"],1))})</a>
                                    <a class="comment" post_id="{$vo.id}">
                                    评论({:W('My/postCommentCount',array($vo["id"]))})</a>
                                </p>
                            </div>
                        </li>
                        </foreach>



                    </ul>


                </div>
            </div>
            <!-- /瀑布流 -->

        </div>

        <!-- /main -->

    </div>

    <!-- 弹层 -->
    <include file="./Public/common/openWindows.html" />
    <!-- 弹层） -->

    <script type="text/javascript">
    <!--wookmark 瀑布流js-->
    (function($) {
    	var page_no = 2;//分页数 从第2页开始
        var category_id = '{$category_id}';
        var $tiles = $('#tiles'),
            $handler = $('li', $tiles),
            $main = $('#wmain'),
            $window = $(window),
            $document = $(document),
            options = {
                autoResize: true, // This will auto-update the layout when the browser window is resized.
                container: $main, // Optional, used for some extra CSS styling
                offset: 20, // Optional, the distance between grid items
                itemWidth: 210 // Optional, the width of a grid item
            };

        /**
         * 展示
         */
        function applyLayout() {
            $tiles.imagesLoaded(function() {
                // Destroy the old handler
                if ($handler.wookmarkInstance) {
                    $handler.wookmarkInstance.clear();
                }
                // Create a new layout handler.
                $handler = $('li', $tiles);
                $handler.wookmark(options);
            });
        }

        /**
         *scroll 事件
         */
        function onScroll() {
            // Check if we're within 100 pixels of the bottom edge of the broser window.
            var winHeight = window.innerHeight ? window.innerHeight : $window.height(), // iphone fix
                closeToBottom = ($window.scrollTop() + winHeight > $document.height() - 100);

            if (closeToBottom) {
                //AJAX载入的数据
                $.ajax({
                    url: "__ROOT__/cate/wookmarkPostAjax",
                    dataType: "html",
                    data:{
                    	'page_no':page_no,
                    	'category_id':category_id
                    },
                    success: function(html) {                  	
                    	if(html!=null&&html!=""){
                    		page_no++;
                    		//把新数据追加到对象中
                       		$tiles.append(html);
                        	//重新展示
                        	applyLayout();
                             bindEvent();
                    	}
                        
                    }
                });

                
            }
        };


        applyLayout();
        bindEvent();


        $window.bind('scroll.wookmark', onScroll);

        function bindEvent(){
             $(".zan").on('click',function(e){
            e.preventDefault();
            <if condition="session('__user__') neq null">
            $.post("__ROOT__/post/favorites",{
                type:2,
                post_id:$(this).attr("post_id")
            },function(data){
               if(data=="add"){
                   
                    location.reload();
                }
            });
            <else/>
                alert("请先登录或注册!");
                return;
            </if>
            
        });

        $(".shoucang").on('click',function(e){
            e.preventDefault();
            <if condition="session('__user__') neq null">
            $.post("__ROOT__/post/favorites",{
                type:1,
                post_id:$(this).attr("post_id")
            },function(data){
                if(data=="add"){
                  
                    location.reload();
                }
            });
            <else/>
                alert("请先登录或注册!");
                return;
            </if>
        });
        $(".comment").on('click',function(e){
            e.preventDefault();
            location.href="__ROOT__/post/"+$(this).attr("post_id");
        });
        }

        

       


    })(jQuery);


    </script>
</body>

</html>
